var viewing_tabs = new Ext.TabPanel({
				xtype: 'tabpanel',
				region: 'center',
					margins: '5 5 5 0',
					tabPosition: 'bottom',
					activeTab: 0,
					items: [{
						title: 'Basic Information',
						layout: 'fit',
							items: {
								title: 'Basic Info',
								id: 'info_tab',
								bodyStyle:'padding:10px;',
								border: false,
								html: '<div id="basic_info">Landing Page for Basic Information</div>'
							}
						},{
						title: 'Current Status',
						layout: 'fit',
							items: {
								title: 'Current Status',
								id: 'cur_tab',
								bodyStyle:'padding:10px;',
								border: false,
								html: '<div id="current_stat">Landing Page for the Current Status Information</div>'
								}
						}]
	});

//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
Ext.app.EnvironmentLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
    processAttributes : function(attr){
        if(attr.group){ // is it an application group node?

            // Set the node text that will show in the tree since our raw data does not include a text attribute:
            attr.text = attr.group;

             // Override these values for our folder nodes because we are loading all data at once.  If we were
            // loading each node asynchronously (the default) we would not want to do this:
            attr.loaded = true;
            //attr.expanded = true;
        }
        else if(attr.name){ // is it an application node?

            // Set the node text that will show in the tree since our raw data does not include a text attribute:
            attr.text = attr.name + '(' + attr.servername + ')';

            // application icon image is found in the westest2.css:
            attr.iconCls = 'application';

            // Tell the tree this is a leaf node.  This could also be passed as an attribute in the original XML,
            // but this example demonstrates that you can control this even when you cannot dictate the format of
            // the incoming source XML:
            attr.leaf = true;
        }
    }
});

	var tpl = new Ext.Template(
        '<h2 class="title">{name}</h2>',
        '<p><b>Server Instance Name</b>: {servername}</p>',
        '<p><b>Application URI</b>: {URI}</p>',
        '<p><b>Application Owner</b>: {owner}',
        '<p><b>Development Lead</b>: {devlead}',
        '<p><b>Synopsis</b>: {innerText}</p>'
	);

    tpl.compile();

	var treePanel = new Ext.tree.TreePanel({
    	id: 'tree-panel',
    	title: 'Application Groupings',
        region:'north',
        split: true,
        collapsible: true,
        margins: '0 2 2 2',
        cmargins: '2 2 2 2',
        height: 300,
        minSize: 150,
        autoScroll: true,
        // tree-specific configs:
        rootVisible: false,
        lines: false,
        singleExpand: true,
        useArrows: true,

	    loader: new Ext.app.EnvironmentLoader({
           dataUrl:'./XML_data/environments.xml'
        }),

        root: new Ext.tree.AsyncTreeNode()
    });


    treePanel.on('click', function(tp){
    	var sn = this.selModel.selNode || {}; // selNode is null on initial selection
    	if(tp.leaf && tp.id != sn.id){  // ignore clicks on folders and currently selected node
    	           tp.getSelectionModel().on('selectionchange', function(tree, node){
                        var el = Ext.getCmp('details-panel').body;
	                    if(node.leaf){
	                        tpl.overwrite(el, node.attributes);
	                    }else{
                            el.update('Sample Text 1');
                        }
                        var el2 = Ext.getCmp('current_stat').body;
	                    if(node.leaf){
	                        //tpl.overwrite(el2, node.attributes);
	                        el2.update('Sample Text 2');
	                    }else{
                            el2.update('Sample Text 3');
                        }
                        var el3 = Ext.getCmp('basic_info').body;
	                    if(node.leaf){
	                        //tpl.overwrite(el3, node.attributes);
	                        el3.update('Sample Text 3');
	                    }else{
                            el3.update('Sample Text 3');
                        }
                    })
	            }
    }
    );
    var details_panel = {
		id: 'details-panel',
        title: 'application Details',
        region: 'center',
        bodyStyle: 'padding-bottom:15px;background:#eee;',
		autoScroll: true,
		html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
    };

Ext.onReady(function(){
    new Ext.Viewport({
		layout: 'border',
		renderTo: 'top_level_tabs',
		title: 'Westfield Application Tracking Portal',
		items: [{
			xtype: 'box',
			applyTo: 'header',
			region: 'north',
			bodyStyle: 'padding-bottom:15px;background:#eee;align:center',
			height: 30
		}, {
			layout: 'border',
	    	id: 'app-portal',
	        region:'west',
	        border: false,
	        collapsible: true,
	        split:true,
			margins: '2 0 5 5',
	        cmargins: '0 0 2 2',
	    	width: 325,
	    	minSize: 100,
			maxSize: 400,
        	height: 500,
        	bodyStyle:'padding:10px;',
			items: [ treePanel, details_panel ]
		 }, {
		 	layout: 'border',
		 	id: 'view-tabs',
		 	border: true,
		 	width: '90%',
		 	region: 'center',
		 	margins: '2 0 5 5',
		 	items: [ viewing_tabs ]
		 }],
        renderTo: Ext.getBody()
    });

});